<template>
  <div>
    <h1>MBTI职业性格测试题</h1>
    <h5>注意：一共93题，每道题只能选择一次，不能修改</h5>
    <div class="test">
      <el-carousel
        ref="carousel"
        arrow="never"
        :autoplay="false"
        indicator-position="none"
      >
        <el-carousel-item v-for="item in question" :key="item.id">
          <div v-if="item.id !== 94">
            <el-form class="question" style="margin-top: 30px"
              >{{ item.id }}.{{ item.title }} <br /><br />
            </el-form>
            <el-button
              @click="option(item, 'A')"
              class="options"
              type="primary"
              plain
              size="large"
              >{{ item.optionA }} </el-button
            ><br />
            <el-button
              @click="option(item, 'B')"
              class="options"
              type="primary"
              plain
              size="large"
              >{{ item.optionB }}
            </el-button>
          </div>
          <div v-if="item.id === 94">
            <el-button
              @click="result"
              class="result"
              type="primary"
              plain
              size="large"
              >查看测试结果</el-button
            >
          </div>
        </el-carousel-item>
      </el-carousel>
      <h3 v-if="isShowResult" style="text-align: center">
        你的测试结果为{{ finalResult }}
      </h3>
    </div>
  </div>
</template>

<script>
import request from "../helper/request.js";
export default {
  data() {
    return {
      question: [
        {
          id: 1,
          title: "当你要外出一整天，你会",
          optionA: "A.计划你要做什么和在什么时候做",
          optionB: "B.说去就去",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 2,
          title: "你认为自己是一个",
          optionA: "A.较为随兴所至的人",
          optionB: "B.较为有条理的人",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 3,
          title: "假如你是一位老师，你会选教",
          optionA: "A.以事实为主的课程",
          optionB: "B.涉及理论的课程",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 4,
          title: "你通常",
          optionA: "A.与人容易混熟",
          optionB: "B.比较沉静或矜持",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 5,
          title: "一般来说，你和哪些人比较合得来？",
          optionA: "A.富于想象力的人",
          optionB: "B.现实的人",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 6,
          title: "你是否经常让",
          optionA: "A.你的情感支配你的理智",
          optionB: "B.你的理智主宰你的情感",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 7,
          title: "处理许多事情上，你会喜欢",
          optionA: "A.凭兴所至行事",
          optionB: "B.按照计划行事",
          answerA: "P",
          answerB: "G",
        },
        {
          id: 8,
          title: "你是否",
          optionA: "A.容易让人了解",
          optionB: "B.难于让人了解",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 9,
          title: "按照程序表做事",
          optionA: "A.合你心意",
          optionB: "B.令你感到束缚",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 10,
          title: "当你有一份特别的任务，你会喜欢",
          optionA: "A.开始前小心组织计划",
          optionB: "B.边做边找须做什么",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 11,
          title: "在大多数情况下，你会选择",
          optionA: "A.顺其自然",
          optionB: "B.按程序表做事",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 12,
          title: "大多数人会说你是一个",
          optionA: "A.重视自我隐私的人",
          optionB: "B.非常坦率开放的人",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 13,
          title: "你宁愿被人认为是一个",
          optionA: "A.实事求是的人",
          optionB: "B.机灵的人",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 14,
          title: "在一大群人当中，通常是",
          optionA: "A.你介绍大家认识",
          optionB: "B.别人介绍你",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 15,
          title: "你会跟哪些人做朋友",
          optionA: "A.常提出新注意的",
          optionB: "B.脚踏实地的",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 16,
          title: "你倾向",
          optionA: "A.重视感情多于逻辑",
          optionB: "B.重视逻辑多于感情",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 17,
          title: "你比较喜欢",
          optionA: "A.坐观事情发展才作计划",
          optionB: "B.早就作计划",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 18,
          title: "你喜欢花很多的时间",
          optionA: "A.一个人独处",
          optionB: "B.和别人在一起",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 19,
          title: "与很多人一起会",
          optionA: "A.令你活力培增",
          optionB: "B.常常令你心力憔悴",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 20,
          title: "你比较喜欢",
          optionA: "A.很早便把约会、社交聚集等事情安排妥当",
          optionB: "B.无拘无束，看当时有什么好玩就做什么",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 21,
          title: "计划一个旅程时，你较喜欢",
          optionA: "A.大部分的时间都是跟当天的感觉行事",
          optionB: "B.事先知道大部分的日子会做什么",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 22,
          title: "在社交聚会中，你",
          optionA: "A.有时感到郁闷",
          optionB: "B.常常乐在其中",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 23,
          title: "你通常",
          optionA: "A.和别人容易混熟",
          optionB: "B.趋向自处一隅",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 24,
          title: "哪些人会更吸引你？",
          optionA: "A.一个思想敏捷及非常聪颖的人",
          optionB: "B.实事求是，具丰富常识的人",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 25,
          title: "在日常工作中，你会",
          optionA: "A.颇为喜欢处理迫使你分秒必争的突发",
          optionB: "B.通常预先计划，以免要在压力下工作",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 26,
          title: "你认为别人一般",
          optionA: "A.要花很长时间才认识你",
          optionB: "B.用很短的时间便认识你",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 27,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.注重隐私",
          optionB: "B.坦率开放",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 28,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.预先安排的",
          optionB: "B.无计划的",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 29,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.抽象",
          optionB: "B.具体",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 30,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.温柔",
          optionB: "B.坚定",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 31,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.思考",
          optionB: "B.感受",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 32,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.事实",
          optionB: "B.意念",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 33,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.冲动",
          optionB: "B.决定",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 34,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.热衷",
          optionB: "B.文静",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 35,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.文静",
          optionB: "B.外向",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 36,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.有系统",
          optionB: "B.随意",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 37,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.理论",
          optionB: "B.肯定",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 38,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.敏感",
          optionB: "B.公正",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 39,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.令人信服",
          optionB: "B.感人的",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 40,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.声明",
          optionB: "B.概念",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 41,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.不受约束",
          optionB: "B.预先安排",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 42,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.矜持",
          optionB: "B.健谈",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 43,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.有条不紊",
          optionB: "B.不拘小节",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 44,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.意念",
          optionB: "B.实况",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 45,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.同情怜悯",
          optionB: "B.远见",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 46,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.利益",
          optionB: "B.祝福",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 47,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.务实的",
          optionB: "B.理论的",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 48,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.朋友不多",
          optionB: "B.朋友众多",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 49,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.有系统",
          optionB: "B.即兴",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 50,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.富想象的",
          optionB: "B.以事论事",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 51,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.亲切的",
          optionB: "B.客观的",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 52,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.客观的",
          optionB: "B.热情的",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 53,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.建造",
          optionB: "B.发明",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 54,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.文静",
          optionB: "B.爱合群",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 55,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.理论",
          optionB: "B.事实",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 56,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.富同情",
          optionB: "B.合逻辑",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 57,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.具分析力",
          optionB: "B.多愁善感",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 58,
          title: "在下列一对词语中，哪一个词语更合你心意",
          optionA: "A.合情合理",
          optionB: "B.令人着迷",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 59,
          title: "当你要在一个星期内完成一个大项目，你在开始的时候会",
          optionA: "A.把要做的不同工作依次列出",
          optionB: "B.马上动工",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 60,
          title: "在社交场合中，你经常会感到",
          optionA: "A.某些人很难打开话匣儿",
          optionB: "B.与多数人都能从容地长谈",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 61,
          title: "要做许多人也做的事，你比较喜欢",
          optionA: "A.按照一般认可的方法去做",
          optionB: "B.构想一个自己的想法",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 62,
          title: "你刚认识的朋友能否说出你的兴趣？",
          optionA: "A.马上可以",
          optionB: "B.要待他们真正了解你之后才可以",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 63,
          title: "你通常较喜欢的科目是",
          optionA: "A.讲授概念和原则的",
          optionB: "B.讲授事实和数据的",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 64,
          title: "哪个是较高的赞誉，或称许为？",
          optionA: "A.一贯感性的人",
          optionB: "B.一贯理性的人",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 65,
          title: "你认为按照程序表做事",
          optionA: "A.一般来说你不大喜欢这样做",
          optionB: "B.一般是有帮助而且是你喜欢做的",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 66,
          title: "和一群人在一起，你通常会选",
          optionA: "A.跟你很熟悉的个别人谈话",
          optionB: "B.参与大伙的谈话",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 67,
          title: "在社交聚会上，你会",
          optionA: "A.是说话很多的一个",
          optionB: "B.让别人多说话",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 68,
          title: "把周末期间要完成的事列成清单，这个主意会",
          optionA: "A.合你意",
          optionB: "B.使你提不起劲",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 69,
          title: "哪个是较高的赞誉，或称许为",
          optionA: "A.能干的",
          optionB: "B.富有同情心",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 70,
          title: "你通常喜欢",
          optionA: "A.事先安排你的社交约会",
          optionB: "B.随兴之所至做事",
          answerA: "J",
          answerB: "P",
        },
        {
          id: 71,
          title: "总的说来，要做一个大型作业时，你会选",
          optionA: "A.边做边想该做什么",
          optionB: "B.首先把工作按步细分",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 72,
          title: "你能否滔滔不绝地与人聊天",
          optionA: "A.只限于跟你有共同兴趣的人",
          optionB: "B.几乎跟任何人都可以",
          answerA: "I",
          answerB: "E",
        },
        {
          id: 73,
          title: "你会",
          optionA: "A.跟随一些证明有效的方法",
          optionB: "B.针对未解决的难题分析还有什么毛病",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 74,
          title: "为乐趣而阅读时，你会",
          optionA: "A.喜欢奇特或创新的表达方式",
          optionB: "B.喜欢作者直话直说",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 75,
          title: "你宁愿替哪一类上司（或者老师）工作？",
          optionA: "A.天性淳良，但常常前后不一的",
          optionB: "B.言词尖锐但永远合乎逻辑的",
          answerA: "T",
          answerB: "N",
        },
        {
          id: 76,
          title: "你做事多数是",
          optionA: "A.按当天心情去做",
          optionB: "B.照拟好的程序表去做",
          answerA: "P",
          answerB: "J",
        },
        {
          id: 77,
          title: "你是否",
          optionA: "A.可以和任何人按需求从容地交谈",
          optionB: "B.在某种情况下才可以畅所欲言",
          answerA: "E",
          answerB: "I",
        },
        {
          id: 78,
          title: "要作决定时，你认为比较重要的是",
          optionA: "A.据事实衡量",
          optionB: "B.考虑他人的感受和意见",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 79,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.想象的",
          optionB: "B.真实的",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 80,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.仁慈慷慨的",
          optionB: "B.意志坚定的",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 81,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.公正的",
          optionB: "B.有关怀心",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 82,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.制作",
          optionB: "B.设计",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 83,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.可能性",
          optionB: "B.必然性",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 84,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.温柔",
          optionB: "B.力量",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 85,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.实际",
          optionB: "B.多愁善感",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 86,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.制造",
          optionB: "B.创造",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 87,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.新颖的",
          optionB: "B.已知的",
          answerA: "N",
          answerB: "S",
        },
        {
          id: 88,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.同情",
          optionB: "B.分析",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 89,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.坚持己见",
          optionB: "B.温柔有爱心",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 90,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.具体的",
          optionB: "B.抽象的",
          answerA: "S",
          answerB: "N",
        },
        {
          id: 91,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.全心投入",
          optionB: "B.有决心的",
          answerA: "F",
          answerB: "T",
        },
        {
          id: 92,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.能干",
          optionB: "B.仁慈",
          answerA: "T",
          answerB: "F",
        },
        {
          id: 93,
          title: "在下列一对词语中，哪一个词语更合你心意？",
          optionA: "A.实际",
          optionB: "B.创新",
          answerA: "S",
          answerB: "N",
        },
        { id: 94 },
      ],
      answer: {},
      isShowResult: false,
      finalResult: "",
    };
  },
  methods: {
    result() {
      this.$router.push("/StudentHome/TestResult");
    },
    option(item, key) {
      this.answer[item.id] = key;
      this.$refs.carousel.next();
    },
    result() {
      const { studentID } = JSON.parse(window.localStorage.getItem("stuInfo"));
      request.post("/MbtiTest", { ...this.answer, studentID }, {
        headers: {
          'Content-Type': 'application/json',
          'flag': 1
        }
      }).then((res) => {
        if (res.code && res.code === 200) {
          this.$message.success('提交成功')
          this.isShowResult = true;
          this.finalResult = res.msg;
        }
      });
    },
    // getMbtiTest() {
    //   request.post('/MbtiTest', {headers: {
    //     'Content-Type': 'application/json'
    //   }})
    // }
  },
  // mounted() {
  //   this.getMbtiTest()
  // }
};
</script>

<style>
h1 {
  font-weight: bold;
  font-size: 30px;
  color: rgb(14, 79, 91);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

h5 {
  font-weight: bold;
  color: rgb(14, 79, 91);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

.test {
  position: absolute;
  left: 46%;
  top: 65%;
  width: 400px;
  padding: 40px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #e0f1fc;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.question {
  font-size: 20px;
  color: #126b7e;
  text-align: center;
}

.options {
  font-size: 25px;
  width: 80%;
  margin: 22px auto;
  margin-left: 40px;
  color: #000000;
  background-color: #e0f1fc;
}

.result {
  width: 50%;
  height: 100px;
  font-size: 25px;
  margin-top: 130px;
  margin-left: 100px;
}
</style>